<script lang="tsx">
/**
 * 月度工资单
 */
export default {
  name: "month-wages"
}
</script>

<script lang="tsx" setup>
import {ref} from 'vue'
import {definePageModel, PageModel} from "@/frame/view/layout/page-model/constructor.ts"
import {processRequest} from "@/frame/apis/request";

/**
 * 弹窗配置
 */
const pageModelRef = ref()
const config = definePageModel<any>({
  url: "/api/MonthWagess",
  searchForm: {
    els: [
      {
        eType: "el-input",
        prop: "code",
        props: {
          placeholder: "单据编码",
          clearable: true
        }
      },
      {
        eType: "el-date-picker",
        prop: "year",
        props: {
          placeholder: "年份",
          valueFormat: "YYYY",
          clearable: true,
          type: "year"
        }
      },
      {
        eType: "el-date-picker",
        prop: "month",
        props: {
          placeholder: "月份",
          valueFormat: "MM",
          clearable: true,
          type: "month"
        }
      }
    ]
  },
  programForm: {
    els: [
      {
        label: "生成",
        eType: "el-button",
        props: {
          type: "primary"
        },
        event: "add"
      }
    ]
  },
  table: {
    page: {
      enable: true,
      pageSize: 20
    },
    props: {
      stripe: false,
      border: false
    },
    operation: {
      width: 80,
      props: {
        fixed: "right"
      },
      els: [
        {
          label: "删除",
          eType: "el-button",
          props: {
            type: "danger"
          },
          event: "delete"
        }
      ]
    },
    els: [
      {
        label: "单据编码",
        prop: "code",
        minWidth: 120
      },
      {
        label: "年份",
        prop: "year",
        minWidth: 120
      },
      {
        label: "月份",
        prop: "month",
        minWidth: 120
      },
      {
        label: "金额",
        prop: "amount",
        minWidth: 120
      },
      {
        label: "创建时间",
        prop: "createTime",
        minWidth: 120,
        renderFn(data) {
          return <span>{data.createTime?.split(" ")[0]}</span>
        }
      }
    ]
  }
})

/**
 * 生成
 */
const handleGenerate = async () => {
  await processRequest.post("")
  handleRefresh()
}

/**
 * 刷新
 */
const handleRefresh = () => {
  pageModelRef.value.refreshTableData()
}

/**
 * 删除
 */
const handleDelete = (row: any) => {
  pageModelRef.value.handleDelete(row)
}
</script>

<template>
  <PageModel ref="pageModelRef" :PageModel="config" @delete="handleDelete" @generate="handleGenerate"/>
</template>